<!--
 * @Author: qiye
 * @LastEditors: qiye
 * @description: page description
 * @Date: 2023-09-13 10:03:30
 * @LastEditTime: 2024-01-23 16:41:37
-->

<script lang="ts" setup>
import { IkingPicker } from 'iking-web-ui'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  clearable: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
})

const emit = defineEmits(['update:visible'])

const { baseUrl } = useHttpUrl()
const token = useToken()

console.log('baseUrl ', baseUrl)

const state = reactive({
  pickerVisible: false,

  api: {
    methods: 'post',
    url: `${baseUrl}/server/component/pick/mix`,
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      Authorization: token
    }
  },
  defaultProps: {
    chooseType: ['user'],
    tabs: ['group', 'role', 'post'],
    typeOption: {
      dep: 'DEPT',
      user: 'USER',
      role: 'ROLE',
      post: 'POST'
    },
    propOption: { name: 'elementName', id: 'elementId', type: 'elementType' }
  }
})

const label = computed(() => props.modelValue?.map((item: any) => item.elementName).join(';'))

const openShowPicker = () => {
  state.pickerVisible = true
}
</script>

<template>
  <div class="ik-picker">
    <el-input
      v-model="label"
      readonly
      :clearable="props.clearable"
      :placeholder="props.placeholder"
      @click="openShowPicker"
    />
    <IkingPicker
      ref="refIkingPicker"
      v-bind="{ ...state.defaultProps, ...$attrs }"
      v-model:show="state.pickerVisible"
      :model-value="props.modelValue"
      :api="state.api"
      @ok="$emit('update:visible', $event)"
    />
  </div>
</template>

<style lang="scss" scoped>
.ik-picker {
  width: 100%;
}
</style>
